<template>
    <div class="message-box-detail">
        <div class="header">
            <p class="title">{{detail.typeStr}}</p>
            <p class="time">{{ detail.sendTime | dateFormat('YYYY-MM-DD HH:mm:ss') }}</p>
        </div>
        <div class="content">{{detail.content}} <!-- <span v-if='!detail.params' @click='goDetail(detail.params)'>查看详情</span> --></div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import {  messageApi } from '../api/api'

    export default {
        components:{

        },
        filters:{
            dateFormat,
        },
        data() {
            return {
                messageId:this.$route.params.id,
                detail:{}
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            getDetail(){
                this.showLoading()
                messageApi.detail({
                    messageId:this.messageId
                })
                .then(result=>{
                    this.hideLoading()
                    this.detail = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goDetail(params){
                if(params.borrowNo){
                    this.$router.push({
                        name:'loan-in-detail-other',
                        params:{
                            number:params.borrowNo
                        }
                    })
                }
            },
            setRead(){
                messageApi.setRead({
                    messageIds:this.messageId
                })
                .then(result=>{
                })
                .catch(error => {
                    console.error(error)
                })
            },
        },
        created(){
            
            this.getDetail()
            this.setRead()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .message-box-detail{
        padding:24px 16px 24px 24px;
        background-color: #fff;
        .header{
            display: flex;
            justify-content: space-between;
            padding-bottom: 16px;
            .title{
                @extend %font-title;
                color:$importColor;
            }
            .time{
                @extend %font-caption;
            }
        }
        .content{
            @extend %font-body1;
            text-indent:2em;
            padding-top: 16px;
            span{
                @extend %font-button;
                color:$orange;
            }
        }
    }

</style>
